<template>
  <div>
    <el-dialog
      title="多元线性回归"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose"
      append-to-body
    >
      <template #default>
        <feature-label-selector
          :input-data="inputData"
          :features="formModel.config.features"
          :labels="formModel.config.labels"
          @feature-change="formModel.config.features = $event"
          @label-change="formModel.config.labels = $event"
        />
        <el-row v-if="formModel.executed">
          <el-button @click="getNodeData">请求数据</el-button>
          <div>mae:{{ formModel.output.mae }}</div>
          <div>mse:{{ formModel.output.mse }}</div>
          <div>r2:{{ formModel.output.r2 }}</div>
        </el-row>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleUpdate">更 新</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import SingleCsvInputNode from '../publicComponents/SingleCsvInputNode.js'
import DialogHandler from '../publicComponents/DialogHandler.js'
import FeatureLabelSelector from '../publicComponents/FeatureLabelSelector.vue'
import axios from 'axios'

export default {
  name: 'MultipleLinearRegression',
  inject: ['root','flowchartId'],
  components: {
    FeatureLabelSelector
  },
  mixins: [SingleCsvInputNode, DialogHandler],
  methods: {
    // 获取数据示例
    getNodeData() {
      axios
        .get(
          `http://localhost:8000/datalab/flowchart/${this.flowId}/node/${this.formModel.id}?type=${this.formModel.alname}`
        )
        .then(res => {
          console.log(res.data)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped>
.el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 30px;
}
</style>
